<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link href="resources/css/mui.min.css" rel="stylesheet" />
<link href="resources/css/common1.css" rel="stylesheet" />
<link href="resources/css/swiper.css" rel="stylesheet" />
<script src="resources/js/swiper.js"></script>
<script src="resources/js/jquery-1.10.1.min.js"></script>
<script src="resources/js/mui.min.js"></script>
<script src="resources/js/common.js"></script>
<script src="resources/js/WebViewJavascriptBridge.js"></script>
<title>注册 </title>
<style>
body,html{width: 100%; max-width: 800px; background: #fff; list-style: none; text-decoration: none;}
.fontS12{font-size: 12px;}
.fontS16{font-size: 16px;}
.fontS20{font-size: 20px;}
.marginT10{margin-top: 10px;}
.marginB10{margin-bottom: 10px;}
p {	text-indent: 0px;}
.mui-content{background: #ffffff;}
.mui-bar .mui-pull-left .mui-icon {	padding-right: 5px;	font-size: 28px;}
.mui-bar .mui-btn {font-weight: normal;font-size: 17px;}
.mui-bar .mui-btn-link {top: 1px;}
#header{background-color:#3084df; }
.mui-title{ color: #ffffff;}
#header a{ color: #ffffff;}
.mui-plus header.mui-bar {display: none!important;}
.mui-plus .mui-bar-nav~.mui-content {padding: 0!important;}
.mui-plus .plus{display: inline;}
.plus{	display: none;}
.mui-content{background: #ffffff;padding: 0px;}
.login{ width: 100%; height: 580px; margin: 0 auto;}
.loginFrom{ width: 100%; border-radius: 5px; padding: 20px; height: 310px;background-color: #FFFFFF;}
.login-tit span{ display: inline-block;border-bottom: 3px solid #4591e2; color:#ffffff; cursor: pointer; width: 50%; height: 30px; line-height: 18px; font-size: 16px; text-align: center;}
.regForm{ width: 100%;padding: 0px 20px; height: 305px; margin: 0 auto; background-color: #FFFFFF;}
.regForm p{position: relative; margin-top:20px;}
.regForm p .prompt{ font-size: 12px; color: #e4393c; position: absolute;left: 305px; height: 40px; line-height: 40px; display: none; width: 200px;}
.regForm p .regFormActive{display: inline-block;}
.regForm p:nth-child(2) .prompt{margin-top: -30px;}
.login-tit{ font-size: 16px; color: #ffffff; text-align: center; margin-top: 15px;}
.login-tit .active{ font-size: 16px;border-bottom: 3px solid #8dc4fe;}
.p_name, .p_password{ width: 100%;  position:relative;height: 40px; background-color: #EFEFEF; cursor: pointer;}
.p_name input, .p_password input{width: 160px;border:0px; color:#333; font-size: 14px; display: inline-block;  height: 28px; margin-top: 6px; padding-left: 0px; background-color: #efefef;}
.p_name img, .p_password img{ margin: 0px 6px; margin-top: -3px;}
.p_password .getCode{ width: 100px;  border:0px;   font-size: 13px;color: #ff4208; height: 38px;text-align: center; top: 0px; display: inline-block; position: absolute; right: 0px; background-color: #EFEFEF;}
.loginBtn{width: 100%; height: 35px; background: -webkit-linear-gradient(left, #3357fb , #3084df); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right, #3357fb , #3084df); /* Opera 11.1 - 12.0 */
   background: -moz-linear-gradient(right, #3357fb , #3084df); /* Firefox 3.6 - 15 */
   background: linear-gradient(to right, #3357fb , #3084df); /* 标准的语法（必须放在最后） */
    cursor: pointer; color: #FFFFFF; border: 0px;}
.regForm .p_forgetPass { width: 100%;padding-left: 20px; font-size:12px; position: relative; text-align: left; color: #cfcfcf; margin-top:5px;}
.regForm .p_forgetPass a{font-size:12px;}
.p_forgetPass a{font-size: 14px;color: #777777; }
.toreg{ width: 100%; text-align: center;font-size: 14px; color: #777777;}
.toreg a{ color: #ff4208;; font-size: 14px;}
.p_forgetPass input{ margin-top: 2px; left: 0px; position: absolute;}

.color-666{ font-size:12px;}
.reg_remarks{ margin-top:-10px; margin-bottom:30px; font-size:12px;  text-align: center; color:#ffffff;}

.loginTitBox{ width: 100%; padding-top: 40px; height: 170px; background: #4591e2; color: #ffffff;}
.loginTitBox a{color: #ffffff; position: absolute; left: 10px; top:10px;}
.titImg{ margin: 0 auto; display: block; width:70px;}

.otherLogin{width: 90%;margin-left: 5%; text-align: center;}
.otherLogin span{display: inline-block;}
.borderTop{height: 5px; width:33%; border-top: 1px solid #ccc;}
.otherLoginTit{height: 30px; color:#ccc; width:30%; text-align:center; line-height: 30px;}
.otherLogin img{ width: 40px;    margin-top: 5px;}
#regForm p{position: relative; padding-left: 40px;}
#regForm img{position: absolute;    top: 10px; left: 0px;}
</style>
</head>
<body>
<div class="login">
	<div class="loginTitBox">
	<!-- <a href="javascript:history.back(-1)"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
	<a id="toBack1"  href="javascript:;" onclick="closePage();"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorf"></a>
	<img class="titImg" src="resources/images/userTitImg.png">
	
	<p class="login-tit">注 &nbsp; &nbsp;册</p>
	</div>
	<div class="regForm">
		<form id="regForm" action="" method="post" class="inline">
			<p class="p_name p_validation"><img src="resources/images/tel.png"><input type="number" id="username" value="${mobile}" placeholder="请输入手机号" /><br><span class="prompt">请输入正确手机号</span></p>
			<p class="p_password p_validation"><img style="margin-top:4px" src="resources/images/sms.png"><input type="text" id="dynaCode" placeholder="请输入验证码"> <button  id="btn" class="getCode color2" type="button">获取验证码</button></p>
			<p class="p_password p_validation"><img src="resources/images/key.png"><input type="password" id="password" placeholder="请设置密码" autocomplete="new-password"><span class="prompt">请输入密码</span></p>
			<p class="p_password p_validation"><img src="resources/images/key.png"><input type="password" id="password2" placeholder="请确认密码" autocomplete="new-password"><span class="prompt">请确认密码</span></p>
			<!--<p class="p_forgetPass"><label for="btnCheckbox" class="color-666 cursor"><input type="checkbox" name="checkbox" id="btnCheckbox" value="" />我已阅读，理解并接受</label><a href="termsService" target="_blank">《服务条款》</a></p>-->
		</form>
		<p><button id="registerPageRegBtn" class="loginBtn color2">立即注册</button></p>
		<p class="toreg">已有账号? <a href="login.html">立即登录</a></p>
	</div>
	
	
</div>
</body>
</html>
<script>
$(function(){
	$(".regForm .p_validation input").focus(function(){
		$(this).parent().addClass("focus").siblings().removeClass("focus");
	})
	
	$(".prompt").hide();
	
	$('.getCode').click(function(){
		$(".prompt").hide();
		var mobile = $('#username').val();
		if(mobile=='') {
			mui.toast('请填写手机号码');
			//$('#username').next("span").show().text('请填写手机号码');
			return;
		}
		if(!/^1[0-9]{10}$/.test(mobile)) {
			mui.toast('手机号码格式不正确');
			//$('#username').next("span").show().text('手机号码格式不正确');
			return;
		}
		var header={
		     	app_version:'1.1.1',
		     	app_model:'ios',
		     	token:'066995456465562'
		}
		 
	 	var body= "";
	 	var model ="";
	 	var jdata="";	
		body={
			mobile: mobile
	    }
	    model={
	    	body:body,
	    	header:header,
	    }
	    jdata=JSON.stringify(model);
		 $.ajax({
			url: 'appUser/sendMsg',
			type: 'post',
			data: {
				data: jdata
			},
			success: function() {
				invokeSettime("#btn");
			},
			error: function(data){
				commonHandleAjaxError(data);
			}
		})
	});
	
	$('.loginBtn').click(function(){
		//做表单验证
		var username = $('#username').val();
		var dynaCode = $('#dynaCode').val();
		var password = $('#password').val();
		var password2 = $('#password2').val();
		if(username =='') {
			/* $('#username').next("span").show().text('请填写手机号码'); */
				mui.toast('请填写手机号码');
			return;
		}
		if(!/^1[0-9]{10}$/.test(username)) {
			/* $('#username').next("span").show().text('手机号码格式不正确'); */
			mui.toast('手机号码格式不正确');
			return;
		}
		if(dynaCode=='') {
			/* $('#verifyCode').next("span").show().text('请填写验证码'); */
			mui.toast('请填写验证码');
			return;
		}
		
		if(dynaCode.length<4 || dynaCode.length > 6) {
			/* alert('请输入正确的验证码') */
			mui.toast('请输入正确的验证码');
			return;
		}
		if(password=='') {
			/* $('#password').next("span").show().text('请输入密码'); */
			mui.toast('请输入密码');
			return;
		}
		if(password.length<6 || dynaCode.length > 20) {
			/* $('#password').next("span").show().text('请输入6到20位密码'); */
			mui.toast('请输入6到20位密码');
			return;
		} 
		if(password2=='') {
			/* $('#password').next("span").show().text('请输入确认密码'); */
			mui.toast('请输入确认密码');
			return;
		}
		if(password2 != password){
		/* 	$('#password2').next("span").show().text('两次密码输入不一致'); */
		mui.toast('两次密码输入不一致');
			return;
		}
		
		/* if($("#btnCheckbox").is(":checked")){
		}
		else {
			mui.toast('请确认隐私条款');
			return;
		} */
		var header={
		     	app_version:'1.1.1',
		     	app_model:'ios',
		     	token:'066995456465562'
		     }
		 
	 	var body= "";
	 	var model ="";
	 	var jdata="";	
		body={
			mobile: username,
			vCode: dynaCode,
			pwd1: password,
			pwd2: password
	    }
	    model={
	    	body:body,
	    	header:header,
	    }
	    jdata=JSON.stringify(model);
		
		$.ajax({
			url: 'appUser/register',
			type: 'get',
			data:{
				'data':jdata
			},
			success: function(data) {
				var json=JSON.parse(data);
				if(json.code == "0"){
					mui.toast('注册成功');
					setTimeout(function(){
						location.href="login.html"
					}, 2000); 
				}else{
					mui.toast(json.msg);
				}
			},
			error: function(data){
				mui.toast('请稍后重试');
				//commonHandleAjaxError(data);
			}
		})
	});
	
})

function invokeSettime(obj){
    var countdown=60;
    settime(obj);
    function settime(obj) {
        if (countdown == 0) {
            $(obj).attr("disabled",false);
            $(obj).text("获取验证码");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled",true);
            $(obj).text(countdown + "s");
            countdown--;
        }
        setTimeout(function() {
           settime(obj) 
        },1000)
    }
}


</script>